<script setup>
import { inject, onMounted, ref, shallowRef } from "vue";
import { getMemberPage } from "@/api/member.js";
import emitter from "@/utils/mitt.js";

const getAssetsFile = inject("getAssetsFile");

const changePath = (path, query = null) => {
	emitter.emit("changePath", {
		path: path,
		query: query,
	});
};

const memberList = ref([]);
const queryParams = ref({
	pageSize: 12,
	pageNum: 1,
});

const getMemberList = async () => {
	const res = await getMemberPage({ ...queryParams.value, isView: 1, status: 2 });
	if (res.data.code === 200) {
		memberList.value = res.data.data.records;
	}
};

onMounted(() => {
	getMemberList();
});
</script>

<template>
	<div class="memberContent">
		<n-grid :cols="5" :x-gap="80" :y-gap="0">
			<n-gi :span="3">
				<n-space align="center" justify="space-between" style="margin-bottom: 20px">
					<n-h6 class="pageTitle" prefix="bar">
						<div>会员展示</div>
					</n-h6>
					<n-button :color="'#999'" text @click="changePath('/index/member/memberList')"> 查看更多>> </n-button>
				</n-space>
				<n-grid :cols="2" :x-gap="40" :y-gap="20">
					<n-gi :span="1" v-for="item in memberList">
						<div class="memberListCard" @click="changePath('/index/member/memberList/memberDetail', { id: item.id })">
							<n-h6 prefix="bar">
								<n-ellipsis :tooltip="false">
									{{ item.unitName }}
								</n-ellipsis>
							</n-h6>
						</div>
					</n-gi>
				</n-grid>
			</n-gi>
			<n-gi :span="2">
				<n-space align="center" justify="space-between" style="margin-bottom: 20px">
					<n-h6 class="pageTitle" prefix="bar">
						<div>快捷功能</div>
					</n-h6>
				</n-space>
				<img
					:src="getAssetsFile('img/content/member/memberRegister.png')"
					alt=""
					style="width: 100%; margin-bottom: 10px; cursor: pointer"
					@click="changePath('/index/member/memberRegister')" />
				<img
					:src="getAssetsFile('img/content/member/memberBenefits.png')"
					alt=""
					style="width: 100%; margin-bottom: 10px; cursor: pointer"
					@click="changePath('/index/member/memberBenefits')" />
			</n-gi>
		</n-grid>
	</div>
</template>

<style scoped>
.memberListCard {
	height: 23px;
	padding: 13px;
	border: 1px solid #dddddd;
	line-height: 23px;
	cursor: pointer;
}
</style>
